<template>
  <div>
    <div>
      <van-sticky>
        <el-card shadow="nover" class="mobile-card-search">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-input
                placeholder="请输入负责人"
                prefix-icon="el-icon-search"
                v-model="queryParams.createBy"
                @keyup.enter.native="handleQuery"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <i
                :style="{ color: colorFlag ? '#1890ff' : '' }"
                class="el-icon-s-operation search-icon"
                @click="showPicker = true"
              ></i>

              <!-- 搜索弹窗 -->
              <van-popup
                v-model="showPicker"
                position="bottom"
                round
                style="height: 80%"
                close-icon="close"
                closeable
                @close="popupClose"
                class="modal-content"
              >
                <h3 style="text-align: center">筛选</h3>
                <van-form class="modal-body" ref="queryForm">
                  <van-field
                    v-model="queryParams.customerName"
                    label="客户名称"
                    placeholder="请输入客户名称"
                  />
                  <searchable-picker
                    v-model="queryParams.customerStatus"
                    :columns="dict.type.customer_status"
                    valueKey="value"
                    labelKey="label"
                    label="客户行业"
                    placeholder="请选择客户行业"
                  />
                  <searchable-picker
                    v-model="queryParams.customerRank"
                    :columns="dict.type.customer_rank"
                    valueKey="value"
                    labelKey="label"
                    label="客户级别"
                    placeholder="请选择客户级别"
                  />
                  <searchable-picker
                    v-model="queryParams.customerType"
                    :columns="dict.type.crm_customer_type"
                    valueKey="value"
                    labelKey="label"
                    label="客户类型"
                    placeholder="请选择客户类型"
                  />
                </van-form>
                <div style="" class="modal-footer">
                  <van-button
                    type="default"
                    style="width: 40%; border-radius: 10px"
                    @click="resetQuery"
                    >重置</van-button
                  >
                  <van-button
                    type="info"
                    style="width: 40%; border-radius: 10px"
                    @click="handleQuery"
                    >查询</van-button
                  >
                </div>
              </van-popup>
              <!-- 搜索弹窗 -->
            </el-col>
          </el-row>
        </el-card>
      </van-sticky>
    </div>
    <div class="mobile-container">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getList"
        finished-text="没有更多了...."
      >
        <div v-if="customerList.length > 0">
          <div
            style="margin-bottom: 20px"
            v-for="customer in customerList"
            :key="customer.customerId"
            class="customer-card"
          >
            <div class="card" @click.stop="handleUpdate(customer)">
              <div class="header">
                <div class="titel">
                  {{ customer.customerName }}
                  <el-dropdown
                    trigger="click"
                    @click.native.stop
                    style="float: right; font-size: 1.2em; color: #0277bd"
                  >
                    <label><i class="el-icon-more"></i></label>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        icon="el-icon-star-off"
                        @click.native.stop="chooseCustomerInfo(customer)"
                        v-if="active === 0"
                        >设为核心</el-dropdown-item
                      >
                      <el-dropdown-item
                        icon="el-icon-edit"
                        @click.native.stop="handleUpdate(customer)"
                        >修改</el-dropdown-item
                      >
                      <el-dropdown-item
                        icon="el-icon-delete"
                        @click.native.stop="handleDelete(customer)"
                        >删除</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="details">
                  <p>所属区域: {{ customer.region }}</p>
                  <p>
                    所属行业:
                    <dict-tag
                      :options="dict.type.customer_industry"
                      :value="customer.customerIndustry"
                      style="display: inline-block"
                    />
                  </p>
                  <p>负责人: {{ customer.createBy }}</p>
                  <p>客户归属: {{coverGroupData(customer.customerAscription)}}</p>
                </div>
                <div class="total-amount">
                  <p>总合同金额: {{ customer.orderCountAmt }} 元</p>
                </div>
              </div>

              <!-- 90% 进度商机 -->
              <div class="opportunity-category">
                <h3>90% 进度商机</h3>
                <ul
                  v-if="customer.orderDTOMap.progess90"
                  class="opportunity-ul-m"
                >
                  <li
                    v-for="order in customer.orderDTOMap.progess90"
                    :key="order.orderId"
                  >
                    <el-row>
                      <el-col :span="24">
                        <label>商机名称：{{ order.orderName }}</label>
                      </el-col>
                      <el-col :span="24">
                        <label>产品名称：{{ order.productName }}</label>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <label>负责人：{{ order.createBy }}</label>
                      </el-col>
                      <el-col :span="24">
                        <label>金额：{{ order.amount }} 元</label>
                      </el-col>
                    </el-row>
                  </li>
                </ul>
                <ul  class="opportunity-list" v-else>
                  <li>无</li>
                </ul>
              </div>

              <!-- 60% 进度商机 -->
              <div class="opportunity-category">
                <h3>60% 进度商机</h3>
                <ul
                  class="opportunity-ul-m"
                  v-if="customer.orderDTOMap.progess60"
                >
                  <li
                    v-for="order in customer.orderDTOMap.progess60"
                    :key="order.orderId"
                  >
                    <el-row>
                      <el-col :span="24">
                        <label>商机名称：{{ order.orderName }}</label>
                      </el-col>
                      <el-col :span="24">
                        <label>产品名称：{{ order.productName }}</label>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <label>负责人：{{ order.createBy }}</label>
                      </el-col>
                      <el-col :span="24">
                        <label>金额：{{ order.amount }} 元</label>
                      </el-col>
                    </el-row>
                  </li>
                </ul>
                <ul class="opportunity-list" v-else>
                  <li >无</li>
                </ul>
              </div>

              <!-- 30% 进度商机 -->
              <div class="opportunity-category">
                <h3>30% 进度商机</h3>
                <ul
                  class="opportunity-ul-m"
                  v-if="customer.orderDTOMap.progess30"
                >
                  <li
                    v-for="order in customer.orderDTOMap.progess30"
                    :key="order.orderId"
                  >
                    <el-row>
                      <el-col :span="24">
                        <label>商机名称：{{ order.orderName }}</label>
                      </el-col>
                      <el-col :span="24">
                        <label>产品名称：{{ order.productName }}</label>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <label>负责人：{{ order.createBy }}</label>
                      </el-col>
                      <el-col :span="24">
                        <label>金额：{{ order.amount }} 元</label>
                      </el-col>
                    </el-row>
                  </li>
                </ul>
                <ul class="opportunity-list" v-else>
                  <li>无</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <van-empty
          description="暂无数据"
          v-if="customerList.length === 0 && !loading"
        />
      </van-list>
      <el-button
        v-if="active === 0"
        type="primary"
        icon="el-icon-edit"
        circle
        class="submitButton"
        @click="handleAdd('-1')"
      ></el-button>
    </div>

    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="friends-o">全部客户</van-tabbar-item>
      <van-tabbar-item icon="manager-o">核心客户</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import {
  listCustomer,
  delCustomer,
  getMyCustomerList,
  chooseCustomer,
} from "@/api/crm/customer";

export default {
  name: "Customer",
  dicts: [
    "customer_industry",
    "crm_customer_type",
    "customer_rank",
    "customer_status",
    "crm_customer_label",
  ],

  props: {
    options: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      active: 0,
      finished: false,
      colorFlag: false,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 客户列表格数据
      customerList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: null,
        linkman: null,
        phone: null,
        regionId: null,
        customerIndustry: null,
        customerRank: null,
        customerType: null,
        customerLabel: null,
        customerStatus: null,
      },
      // 表单参数
      form: {},
      showPicker: false,
    };
  },
  created() {
    this.getList();
  },

  methods: {
    chooseCustomerInfo(row) {
      chooseCustomer(row).then((res) => {
        this.$toast.success("设置成功");
        this.handleQuery();
      });
    },
    onChange() {
      this.customerList = [];
      this.getList();
    },
    popupClose() {
      if (
        this.queryParams.customerName ||
        this.queryParams.customerStatus ||
        this.queryParams.customerRank ||
        this.queryParams.customerType
      ) {
        this.colorFlag = true;
      } else {
        this.colorFlag = false;
      }
    },
    /** 查询项目列表 */
    async getList() {
      this.loading = true;
      try {
        let obj = JSON.parse(JSON.stringify(this.queryParams));
        let res = null;
        if (this.active === 0) {
          res = await listCustomer(obj);
        } else {
          res = await getMyCustomerList(obj);
        }
        // 判断是否加载完所有数据
        if (this.customerList.length >= res.total) {
          this.finished = true;
        } else {
          this.customerList.push(
            ...res.rows.map((item) => ({
              ...item,
              flag: false,
            }))
          );
          this.queryParams.pageNum += 1;
        }
      } catch (error) {
        console.error("加载数据失败", error);
      } finally {
        this.loading = false;
      }
    },

    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        customerId: null,
        customerName: null,
        linkman: null,
        duty: null,
        phone: null,
        regionId: null,
        customerIndustry: null,
        customerRank: null,
        customerType: null,
        customerLabel: null,
        customerStatus: null,
        helpPerson: null,
        preOwner: null,
        userId: null,
        lastUpdateRecord: null,
        lastFollowupTime: null,
        nextFollowupTime: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.customerList = [];
      this.queryParams.pageNum = 1;
      this.showPicker = false;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        customerName: null,
        customerStatus: null,
        customerRank: null,
        customerType: null,
      };
      this.handleQuery();
      this.colorFlag = false;
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(customerId) {
      this.$router.push("/crm/addCustomer/" + customerId);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push("/crm/addCustomer/" + row.customerId);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$dialog
        .confirm({
          title: "删除客户信息提醒",
          message: "是否确认删除客户信息?",
        })
        .then(() => {
          delCustomer(row.customerId).then((res) => {
            this.$toast.success("删除成功");
            this.handleQuery();
          });
        });
    },
  },
};
</script>

<style scoped>
.modal-content {
  display: table;
  width: 100%;
  height: 100%;
}

.modal-body {
  display: table-row;
  height: 100%;
}

.modal-footer {
  display: table-row;
  text-align: center;
  padding: 16px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #e4dfdf;
}

.modal-footer button {
  width: 45%;
  border-radius: 10px;
}

.submitButton {
  position: fixed;
  top: 85%;
  left: 85%;
}

.el-row {
    line-height: 25px;
}


 .opportunity-ul-m li {
    padding: 5px 0;
    color: black;
    background-color: #81d4fa;
    margin-bottom: 5px;
    border-radius: 5px;
    padding: 5px 10px;
  }
  
</style>